.el-overlay {
  overflow: hidden;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.el-form.fixed-width {

  .el-select,
  .el-input,
  .el-input-number {
    width: 300px;
  }
}

.el-drawer.rtl .el-drawer__header {
  color: var(--el-text-color-primary);
  font-size: 22px;
  margin-bottom: 0;
  border-left: 20px;
  border-bottom: 1px solid #e4e7ed;
  padding: 0 0 15px 0;
  margin: 65px 36px 0 36px;

  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &>h4 {
      margin: 0;
      font-weight: 500 !important;
    }
  }

  &>h4 {
    margin: 0;
    font-weight: 500 !important;
  }
}

:deep(.custom-view-form .el-form-item__content) {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  display: block;
}

:deep(.custom-view-form_nobreak) {
  .el-form-item__content {
    width: 100%;
    flex-wrap: nowrap !important;
    @extend %ellipsis;

    &:has(.el-tag) {
      @extend %ellipsis;
    }

    &>span {
      @extend %ellipsis;

      &:not([class*="el-tag"]) {
        width: 100%;
      }
    }
  }
}

.el-drawer.rtl .el-drawer__body {
  padding: 27px 36px !important;
  margin: 0;

  .el-input-number .is-without-controls {
    width: 100%;
  }

  @extend %scrollbar;
}

.el-drawer__body {
  .el-input-number {
    width: 100%;

    &:not(.center) {
      .el-input__inner {
        text-align: left !important;
      }
    }
  }
}

.drawer-body-lock {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawertable-content {
  flex: 1;
  min-height: 0;
}

.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: center;
}

.dialog-footer-pager {
  width: 100%;
  padding: 27px 36px !important;
}

.el-drawer__footer:has(.dialog-footer-pager) {
  padding: 0 !important;
}

// 带分页列表页
.pager-container {
  height: calc(100%);
  width: calc(100%);
  padding-bottom: var(--footer-pager) !important;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-tag {
  max-width: 50%;

  .el-tag__content {
    width: 100%;
  }

  & .card-tag-text {
    width: 100%;
    @extend %ellipsis;
  }
}

.mb-main-padding {
  margin-bottom: var(--main-padding);
}

.dark-blue .card-item {
  background: linear-gradient(180deg, #010f1c 0%, #0b213b 100%);
  border: 1px solid #223448;
}

.custom-card-container {
  $border-color: #223448;

  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-auto-rows: 210px;
  gap: var(--main-padding);
  overflow-y: scroll;
  @extend %scrollbar;

  .card-item {
    transition: all linear 0.1s;
    max-width: 100%;
    /* 限制卡片的最大宽度 */
    // background-color: #f5f5f5; /* 可选：为卡片添加背景色以便于查看 */
    cursor: pointer;

    &:hover {
      border: 1px solid #409eff;
    }
  }

  .card-header {
    display: flex;
    align-items: center;
    padding: var(--main-padding);
    border-bottom: 1px solid var(--el-border-color);
    gap: 5px;

    img {
      height: 14px;
      width: 14px;
    }

    span {
      @extend %ellipsis;
    }
  }

  .card-body {
    flex: 1;
    padding: var(--main-padding);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 30px;
    grid-template-rows: repeat(3, 30px);
  }

  .card-body-item {
    height: 30px;
    line-height: 30px;
    @extend %ellipsis;
  }

  .card-footer {
    border-top: 1px solid var(--el-border-color);
    padding: var(--main-padding);
    display: flex;
    justify-content: space-between;

    .title {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .operate {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }
}

.content-other {
  flex-grow: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cpi-content-main {
  flex-grow: 1;
  overflow: auto;
  @extend %scrollbar;
}

.pager-wrapper {
  position: absolute;
  height: calc(var(--footer-pager) - 1px);
  background-color: var(--el-bg-color-page);
  display: flex;
  align-items: center;
  width: calc(100% - var(--main-padding) * 2);
  bottom: 0px;
  z-index: 4;
  box-sizing: border-box;

  /* 确保边框和内边距不影响宽度 */
  & .el-pagination {
    width: 100%;
    padding-right: var(--main-padding);
  }
}

.pager-wrapper.center {
  justify-content: center !important;
}

.el-textarea__inner {
  @extend %scrollbar;
}

.sh-operate {
  gap: 3px;

  .sh-btn {
    padding: 8px;
    border-radius: 4px 4px 4px 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

    &>svg {
      width: 20px !important;
      height: 20px !important;
      opacity: 0.6;
    }

    &.active {
      background: var(--v3-header-bg-color);
    }

    &:hover {
      background: var(--v3-header-bg-color);
    }
  }
}

.cc-search {
  background: var(--el-bg-color-overlay);
  border-radius: 4px 4px 4px 4px;
  padding: var(--main-padding);
  margin-bottom: 13px;

  .cc-search-common {
    display: flex;
    align-items: center;

    .csc-search-input {
      width: 300px;
    }

    .csc-more {
      cursor: pointer;
      margin-left: 10px;
      display: flex;
      align-items: center;
      gap: 5px;

      &:hover {
        color: var(--el-color-primary);
      }
    }
  }

  .cc-search-common-more {
    padding-top: var(--main-padding);
  }
}

.gap {
  gap: 10px;
}

.flex-column {
  display: flex !important;
  flex-direction: column;
}

.cpi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 13px;
  height: 32px;
  line-height: 32px;

  .cpi-header-text {
    position: relative;
    padding-left: 10px;
    font-weight: 500;
    color: var(--el-text-color-primary);
    line-height: 21px;
    font-size: 16px;
  }

  .cpi-header-text-right {
    width: 136px;
    height: 32px;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #293860;
    cursor: pointer;
    border-radius: 4px 4px 4px 4px;

    .cpi-header-text-right-text {
      flex: 1;
      color: #f0f0f0;
      line-height: 32px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px 4px 4px 4px;
      transition: background-color 0.3s;
    }

    .active {
      background: #409eff;
    }
  }

  .cpi-header-text::before {
    content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: #3a8dff;
    /* 蓝色竖条 */
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

// .cc-pane-item {
//   flex: 1;
//   display: flex;
//   flex-direction: column;
//   padding-bottom: var(--main-padding);
//   padding-top: 13px;

//   .cpi-footer {
//     padding-top: var(--main-padding);
//   }
// }

// .cpi-content {
//   flex: 1;
//   padding: var(--main-padding);
//   background-color: var(--micro-pane-bg-color);
//   border-radius: 6px 6px 6px 6px;
//   display: flex;
//   flex-direction: column;
//   overflow: hidden;

//   &.nobac {
//     background-color: transparent;
//   }

//   .cpi-content-toolbar {
//     display: flex;
//     justify-content: space-between;
//     margin-bottom: var(--main-padding);
//   }

//   .cpi-content-main {
//     flex: 1;
//     overflow-y: auto;
//     overflow-x: hidden;
//     @extend %scrollbar;
//   }
// }

.inte-tip-pane-popper,
.inte-tip-pane-popper>.el-popper__arrow:before {
  background: #1c294a !important;
}

.inte-tip-pane-popper.open {
  inset: auto auto 100px calc(255px) !important;
}

.inte-tip-pane-popper.open>.el-popper__arrow {
  left: 45px !important;
}

.inte-tip-pane-popper.close {
  inset: auto auto 100px calc(89px) !important;
}

.inte-tip-pane-popper.close>.el-popper__arrow {
  left: 45px !important;
}

.splitpanes.default-theme .splitpanes__pane {
  background-color: var(--el-bg-color) !important;
}